/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput, ScrollView } from 'react-native';
import { Checkbox } from 'antd-mobile-rn'
import { Icon } from 'react-native-elements'
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

import SplashScreen from 'react-native-splash-screen';


/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Power_Login extends PageBase {
	constructor(props){
		super(props);
		this.state = {
            data:{
                box:{},
                kuang:[],
                user:{}
            },
            big:{
                count:2,
                cost:30
            },
            secondary:{
                count:6,
                cost:20
            },
            small:{
                count:10,
                cost:10
            },
            // 大号 数量
            big:0,
            // 中号 数量
            middle:0,
            // 小号 数量
            small:0,

            // 账户余额
            money:50,
            // 共计金额
            countMoney:0,
            // 快递柜ID
            id:Number,

        };
	}
	
	/************************************************************************************ Life */
	/**
	 * willMount
	 */
    componentWillMount(){
        let { id } = this.props.navigation.state.params;
		this.setState({
            id:id
        })
	}

	/**
	 * willMount
	 */
	componentDidMount(){
        Http.get({
            url:'page/box/detail.php',
            data:{
                id:this.state.id
            },
            success:(data) => {
                console.log('dataaaaaaaaaaaaaaaaaaaaaaa',data)
                this.setState({
                    data:data
                })
            },
            pipe:Config.pipe.action.default
        })
    }
    
    /************************************************************************************ Fun */
    /**
	 * subtract
	 */
    subtract = (value,money) =>{
        // this.state[value] = this.state[value]+1;
        if(this.state[value] <= 0 ){
            // Dialog.text('最少预约一个柜子');
            return;
        }
        console.log('value',value)
        this.setState({
            [value]:this.state[value] - 1,
        },()=>{
            this.count()
        })
    }
    /**
	 * add
	 */
    add = (value,count,money) =>{
        // this.state[value] = this.state[value]+1;
        if(this.state[value] >= count) {
            Dialog.text('剩余格口数量不足');
            return;
        }
        console.log('value',value)
        // this.state.data.kuang[index]['box_Type'] = this.state.data.kuang[index]['box_Type']-1;
        this.setState({
            [value]:this.state[value] + 1,
        },()=>{
            this.count()
        })
    }
    /**
	 * count
	 */
    count = e => {
        var total = 0;
        for( var item of this.state.data.kuang){
            total += item.cost * this.state[item.box_Type];
        }
        this.setState({
            countMoney:total.toFixed(2)
        })
    }
    /**
	 * submit
	 */
    submit = e => {
        if(this.state.money < this.state.count){
            Dialog.text('余额不足')
            return;
        }
        if(this.state.countMoney == 0){
            Dialog.text('至少预约一个柜子')
            return;
        }
        Http.post({
            url:'page/box/logic/reserve.php',
            data:{
                box_id:this.state.id,
                big:this.state.big,
                middle:this.state.middle,
                small:this.state.small,
            },
            success:(data) => {
                Dialog.text('预约成功,跳转至预约记录…………');
                setTimeout(()=>{this.nav.navigate('Record');},3000)
                
                // console.log('dataaaaaaaaaaaaaaaaaaaaaaa',data)
            },
            pipe:Config.pipe.action.default
        })
    }
	
	
	/************************************************************************************ Render */
	render() {
		return (
			<CPage>
				<CScroll bg='#efeff4' mt='96'>

                    <CColumn>
                        <CRow bg='#32c07c' mb='20'>
                            <CItemY f='1' mb='40' mt='80'>
                                <CRow px='40' py='10'>
                                    <CText size='30' color='#fff'>{this.state.data.box.position_name}快递柜</CText>
                                </CRow>
                                <CRow px='40' py='10'>
                                    <CIcon w='30' h='30' mr='10' color='#fff' icon={ Design.icon["location"] }></CIcon>
                                    <CText size='26' color='#fff'>{this.state.data.box.position_addr}</CText>
                                </CRow>
                            </CItemY>
                            <CItemY f='1' x='center' y='center' opacity='0.05' oh h='200'>
                                <CSvg w='200' h='200' ml='120' mt='120' icon={ Design.svg['server-kuaidi'] }></CSvg>
                            </CItemY>
                        </CRow>

                        <CItemY bg='#fff' w='750' py='30' bb='1 #efeff4' mb='20' >
                        {
                            this.state.data.kuang.map( (item,index) => {
                                let name = '';
                                item.box_Type == 'big' && (name = '大号格口')
                                item.box_Type == 'middle' && (name = '中号格口')
                                item.box_Type == 'small' && (name = '小号格口')
                                return (
                                    //  格口信息 
                                    <CRow px='30' pt='10' key={item.id}>
                                        <CBetween bb='1 #efeff4' pb='10' y='center'>
                                            <CItemY>
                                                <CText size='26' color='#333'>{name}</CText>
                                                <CText size='22' color='#999'>剩余 {item.count} 个</CText>
                                            </CItemY>
                                            <CHand y='center'>
                                                <CText size='26' color='#666'>￥{item.cost}/个</CText>
                                            </CHand>
                                            <CHand y='center'>
                                                <Icon name='remove-circle' color='#ccc' size={22} onPress={e=>this.subtract(item.box_Type,item.cost)}/>
                                                <CText w='50' style={{textAlign:'center'}}>{this.state[item.box_Type]}</CText>
                                                <Icon name='add-circle' color='#26c75e' size={22} onPress={e=>this.add(item.box_Type,item.count,item.cost)}/>
                                            </CHand>
                                        </CBetween>
                                    </CRow>
                                )
                                
                            })
                        }
                        </CItemY>

                        {/* 总计 */}
                        <CRow px='30' mt='20' x='center' bg='#fff9' w='750' py='15'>
                            <CText color='#666'>账户余额：{this.state.data.user.balance}    共计金额：{this.state.countMoney}</CText>
                        </CRow>
                    </CColumn>

				</CScroll>

				{/* PHeader */}
                <PHeader nav={this.nav}>快递柜详情</PHeader>
                {/* CFooter */}
                <CFooter style={{width:'100%'}} >
					<CButton {...Design.global.commonButton} h='96' ra='0' size='34' onPress={e=>this.submit()}>预约格口</CButton>
				</CFooter>
			</CPage>
		);
	}
}
